<template>
  <!-- 网格范围弹窗 -->
  <base-paenl class="grid-information-dialog" id="gridDialog">
    <div
      slot="header"
      class="header-title"
      @mousedown="mouseDownLeft($event, 'gridDialog', 100, 600)"
    >
      网格范围
    </div>
    <div slot="main" class="slot-main">
      <div class="dialog-content-second">
        <img
          src="../../assets/images/dialogs/tanchuangcibiaotixiaosanjiao.png"
          width="9px"
          height="12px"
          style="margin: 0 10px"
        />网格范围列表——{{ gridRangeData.name }}
      </div>
      <div class="grid-range-header">
        <div class="col col1">区名</div>
        <div class="col col2">网格名</div>
        <div class="col col3">社区名</div>
        <div class="col col4">社区数</div>
      </div>
      <el-scrollbar style="height: 220px">
        <div
          v-for="(item, index) in tableList"
          :key="index"
          class="grid-range-row"
        >
          <div class="col col1">{{ item.region }}</div>
          <div class="col col2">{{ item.gridName }}</div>
          <div class="col col3" :title="item.fuzeSqcj">{{ item.fuzeSqcj }}</div>
          <div class="col col4">{{ item.sqCount }}</div>
        </div>
      </el-scrollbar>
    </div>
  </base-paenl>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import { mouseDownLeft } from "@/assets/modules/utils";
import BasePaenl from "./CBase.vue";

@Component({
  name: "GridInformation",
  components: {
    BasePaenl
  }
})
export default class extends Vue {
  get gridRangeData() {
    return this.$store.getters["panelData/gridRangeData"];
  }
  get tableList() {
    return this.gridRangeData.list;
  }
  mounted() {}
  mouseDownLeft(event: any, id: string, sTop: number, sRight: number) {
    mouseDownLeft(event, id, sTop, sRight);
  }
}
</script>

<style lang="scss" scoped>
.grid-information-dialog {
  width: 505px;
  height: 362px;
  background-image: url(../../assets/images/dialogs/tanchuangbeijingkuang-1.png);
  background-size: 100% 100%;
}
.grid-range-header {
  width: 470px;
  height: 32px;
  background-image: url(../../assets/images/dialogs/tuanchuangbiaotoudikuan.png);
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  .col {
    font-family: AlibabaPuHuiTi_2_55_Regular;
    font-size: 14px;
    line-height: 44px;
    color: #ffffff;
  }
}
.grid-range-row {
  width: 470px;
  height: 32px;
}
.col1 {
  width: 60px;
  text-align: center;
}
.col2 {
  width: 120px;
  text-align: center;
}
.col3 {
  width: 220px;
  text-align: center;
}
.col4 {
  width: 60px;
  text-align: center;
}
</style>
<style lang="scss">
.grid-information-dialog {
  position: fixed;
  left: 600px;
  top: 100px;
  z-index: 100;
}
.dialog-content-second {
  font-family: AlibabaPuHuiTi_2_65_Medium;
	font-size: 16px;
	line-height: 44px;
	color: #ffffff;
}
.grid-range-row {
  background-color: rgba(5, 61, 122, 0.25);
  display: flex;
  align-items: center;
  margin: 2px 0;
  .col {
    font-family: AlibabaPuHuiTi_2_55_Regular;
    font-size: 12px;
    line-height: 44px;
    color: #b4d8f7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
